<template>
  <view :class="prefixCls">
    <view :class="cls" :style="{ background: background }">
      <view
        class="arco-navbar-statusBarHeight"
        :style="{ height: statusBarHeight + 'px' }"
      >
      </view>
      <view class="arco-navbar-head" :style="headeStyle">
        <view class="arco-navbar-navback" @click="back">
          <aIcon
            v-if="leftArrow"
            class="arco-navbar-navback-icon"
            name="fanhui"
          ></aIcon>
          <text class="arco-navbar-navback-text">{{ leftText }}</text>
        </view>
        <view class="arco-navbar-navTitle"> {{ title }}</view>
      </view>
    </view>
    <view>
      <view :style="{ height: statusBarHeight + 'px' }" />
      <view :style="{ height: height + 'px' }" />
    </view>
  </view>
</template>

<script lang="ts">
import { computed, CSSProperties, defineComponent, ref } from "vue";
import aIcon from "../arco-icon/index.vue";
export default defineComponent({
  name: "AHeader",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: {
    aIcon,
  },
  props: {
    title: String,
    isfixed: {
      type: Boolean,
      default: true,
    },
    leftArrow: {
      type: Boolean,
      default: false,
    },
    leftText: {
      type: String,
      default: "",
    },
    background: {
      type: String,
      default: "#FFFFFF",
    },
    isborder: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["back"],
  setup(props) {
    const prefixCls = "arco-navbar";
    // 默认高度设置为44px
    const height = 44;

    const statusBarHeight = ref(0);

    // 状态栏加上自定义的高度
    // const navbarHeight = computed(() => {
    //   return (
    //     (uni.getSystemInfoSync().statusBarHeight as number) +
    //     config.height +
    //     "px"
    //   );
    // });
    getSystemInfo();
    function getSystemInfo() {
      uni.getSystemInfo({
        success: (res) => {
          // this.statusBarHeight = res.statusBarHeight;
          statusBarHeight.value = res.statusBarHeight;
          // let navbar = this.navbarHeight;
          console.log(res, "我是胶南");
          // // #ifdef MP-WEIXIN
          // // 胶囊居中
          // const custom = wx.getMenuButtonBoundingClientRect();
          // navbar = custom.height + (custom.top - res.statusBarHeight) * 2;
          // // #endif
          // if (!this.isStatusBar) this.statusBarHeight = 0;
          // this.topHeight = this.statusBarHeight + navbar;
        },
      });
    }

    const headeStyle = computed<CSSProperties>(() => {
      const style: CSSProperties = {};
      style["height"] = height + "px";
      style["line-height"] = height + "px";
      style["background"] = props.background;
      // props.isfixed && (style["background"] = props.background);

      return style;
    });

    const cls = computed(() => [
      `${prefixCls}-container`,
      {
        [`${prefixCls}-container-fixed`]: props.isfixed,
        [`${prefixCls}-container-border`]: props.isborder,
      },
    ]);

    // 返回上一级
    function back() {
      uni.navigateBack();
    }

    return {
      prefixCls,
      cls,
      headeStyle,
      statusBarHeight,
      height,
      back,
    };
  },
});
</script>
